<!-- eslint-disable unused-imports/no-unused-vars -->
<!--
 * @Description: 对账单表单
 * @Author: py
 * @Date: 2024-12-23
-->
<script setup lang="ts" name="account-form">
import type { FormInstance } from 'element-plus'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useChargeSettleStoreWithOut } from '@/store/modules/charge-settle'
import { settleOrderListApi, useExportSettleList, useUpdateStatementStatus } from '@fl/api/charge-settle'
import FlUpload from '@fl/components/fl-upload.vue'
import { cloneDeep } from 'lodash-es'
import { formatTime } from '@fl/utils'
import { isImgPath } from '@fl/utils/is'
import { useRouter } from 'vue-router'
import XEUtils from 'xe-utils'

import { useDicts } from './hooks/use-dicts'

const router = useRouter()

const { query } = useRoute()
const { formType, id } = query

const formRef = ref()

const { getDictLabel, getDictOptions } = useDicts()
const exceptionTypeOptions = getDictOptions('oExceptionType')

const chargeSettleStore = useChargeSettleStoreWithOut()
const statementInfo = computed(() => chargeSettleStore.getStatementInfo)
// console.log("🚀 ~ statementInfo:", statementInfo);

type VoucherItem = {
    name: string
    url: string
}

// 合作商异议凭证
const vendorDiffVoucher = computed(() => {
    const vendorConfirmUrl = statementInfo.value.vendorConfirmUrl
    if (vendorConfirmUrl && isImgPath(vendorConfirmUrl)) {
        const arrUrl = vendorConfirmUrl.split(',')
        return arrUrl.map((item) => {
            const fileName = item.substring(item.lastIndexOf('/') + 1)
            return {
                name: fileName,
                url: item,
            }
        })
    }
    return [] as VoucherItem[]
})
// 异常结算凭证
const settleVoucher = computed(() => {
    const exceptionSettlementUrl = statementInfo.value.exceptionSettlementUrl
    if (exceptionSettlementUrl && isImgPath(exceptionSettlementUrl)) {
        const arrUrl = exceptionSettlementUrl.split(',')
        return arrUrl.map((item) => {
            const fileName = item.substring(item.lastIndexOf('/') + 1)
            return {
                name: fileName,
                url: item,
            }
        })
    }
    return [] as VoucherItem[]
})
// 开票凭证
const invoiceVoucher = computed(() => {
    const invoiceUrl = statementInfo.value.invoiceUrl
    if (invoiceUrl && isImgPath(invoiceUrl)) {
        const arrUrl = invoiceUrl.split(',')
        return arrUrl.map((item) => {
            const fileName = item.substring(item.lastIndexOf('/') + 1)
            return {
                name: fileName,
                url: item,
            }
        })
    }
    return [] as VoucherItem[]
})

const {
    commission,
    parkingFee,
    differenceReason,
    vendorConfirm,
    exceptionTime,
    vendorName,
    exceptionAmount,
    actualInvoiceAmount,
    invoiceTime,
    invoiceNumber,
    // invoiceVoucher: [] as VoucherItem[],
    operatorName,
    reconciliationName,
    reconciliationCode,
    exceptionType,
    totalAmount,
    platformServiceFee,
    // settleVoucher: [] as VoucherItem[],
    solutionSuggestion,
    actualSettlementAmount,
    revenue,
    dueSettlementAmount,
    dueInvoiceAmount,
    reconciliationDate,
    reconciliationEndDate,
    reconciliationStartDate,
    reconciliationStatus,
    invoiceDiff,
    settlementDiff,
    operatorId,
    vendorId,
} = statementInfo.value

const formValues = ref({
    commission,
    parkingFee,
    differenceReason,
    vendorConfirm,
    exceptionTime: formType === 'exception' ? formatTime(new Date(), 'yyyy-MM-dd') : exceptionTime,
    vendorName,
    exceptionAmount: formType === 'exception' ? settlementDiff : exceptionAmount,
    actualInvoiceAmount,
    invoiceTime: formType === 'invoice' ? formatTime(new Date(), 'yyyy-MM-dd') : invoiceTime,
    invoiceNumber,
    operatorName,
    reconciliationName,
    reconciliationCode,
    exceptionType: formType === 'exception' ? (settlementDiff > 0 ? '1' : '2') : exceptionType,
    totalAmount,
    platformServiceFee,
    solutionSuggestion,
    actualSettlementAmount,
    revenue,
    dueSettlementAmount,
    dueInvoiceAmount,
    reconciliationDate,
    reconciliationEndDate,
    reconciliationStartDate,
    reconciliationStatus,
    invoiceDiff,
    settlementDiff,
    operatorId,
    vendorId,
    vendorDiffVoucher: vendorDiffVoucher.value,
    invoiceVoucher: invoiceVoucher.value,
    settleVoucher: settleVoucher.value,
})

const rules = {
    exceptionTime: [{ message: '请选择结算时间', required: true, trigger: 'change' }],
    exceptionAmount: [{ message: '请输入结算金额', required: true, trigger: 'blur' }],
    actualInvoiceAmount: [{ message: '请输入开票金额', required: true, trigger: 'blur' }],
    invoiceTime: [{ message: '请选择开票时间', required: true, trigger: 'change' }],
    invoiceVoucher: [{ message: '请上传发票凭证', required: true, trigger: 'change' }],
    exceptionType: [{ message: '请选择结算异常处理类型', required: true, trigger: 'change' }],
    settleVoucher: [{ message: '请上传结算凭证', required: true, trigger: 'change' }],
}

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const stateMap = {
    1: 'tag-red',
    2: 'tag-orange',
    3: 'tag-orange',
    4: 'tag-blue',
    5: 'tag-green',
}
function formatDate({ cellValue }) {
    return formatTime(cellValue, 'yyyy-MM-dd')
}

// 金额格式化 - 千分位
function formatMoney({ cellValue }) {
    const formatedNum = XEUtils.commafy(Number(cellValue), { digits: 2 })
    return cellValue === null ? '' : `¥ ${formatedNum}`
}

// 表单配置
const detailsGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { fixed: 'left', field: 'settlementCode', minWidth: 140, title: '结算单号' },
        { field: 'settlementName', minWidth: 250, title: '结算单名称' },
        { field: 'settlementDate', title: '结算日期', width: 110 },
        { field: 'operatorName', minWidth: 130, title: '运营商名称' },
        { field: 'vendorName', minWidth: 160, title: '合作商名称' },
        { field: 'settlementTime', title: '结算时间', width: 160 },
        { slots: { default: 'status' }, title: '结算状态', width: 135 },
        { align: 'right', field: 'totalAmount', formatter: formatMoney, title: '实收总金额', width: 120 },
        { align: 'right', field: 'platformServiceFee', formatter: formatMoney, title: '平台技术服务费', width: 135 },
        { align: 'right', field: 'parkingFee', formatter: formatMoney, title: '停车费申诉扣减费', width: 145 },
        { align: 'right', field: 'revenue', formatter: formatMoney, title: '营业额', width: 120 },
        { align: 'right', field: 'commission', formatter: formatMoney, title: '佣金', width: 120 },
        { align: 'right', field: 'dueSettlementAmount', formatter: formatMoney, title: '应结算金额', width: 120 },
        { align: 'right', field: 'actualSettlementAmount', formatter: formatMoney, title: '实际结算金额', width: 120 },
    ],
    data: [],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    loading: false,
    maxHeight: 360,
    minHeight: 60,
    size: 'medium',
})

function getSettlementList() {
    detailsGridOptions.loading = true

    const { operatorId, vendorId, reconciliationStartDate, reconciliationEndDate } = formValues.value
    const oParams = {
        asc: true,
        orderByColumn: 'settlementDate',
        pageNum: tablePage.currentPage,
        pageSize: tablePage.pageSize,
        // operatorId,
        vendorId,
        // settlementStatus,
        settlementTimeStart: reconciliationStartDate,
        settlementTimeEnd: reconciliationEndDate,
    }

    settleOrderListApi(oParams).then((res) => {
        const { records, total } = res
        tablePage.total = +total
        detailsGridOptions.data = records
    }).finally(() => {
        detailsGridOptions.loading = false
    })
}
getSettlementList()

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    getSettlementList()
}

// 导出
const exportParams = computed(() => ({
    date: formValues.value.reconciliationDate,
    vendorId: formValues.value.vendorId,
}))
const { isPending, mutateAsync } = useExportSettleList(exportParams)
async function handleExport() {
    const res = await mutateAsync()
    if (res) {
        const objectUrl = URL.createObjectURL(res)
        location.href = objectUrl
        URL.revokeObjectURL(objectUrl)
    }
}

function onSuccess(message) {
    ElMessage.success({
        duration: 2000,
        message,
    })

    setTimeout(() => {
        router.back()
    }, 2000)
}

const isFormLoading = ref(false)
const { isPending: isUpdateStatePending, mutate: statusMutate } = useUpdateStatementStatus()
// 提交表单
async function handleSubmit(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid) => {
        if (valid) {
            // isFormLoading.value = true;
            const {
                reconciliationStatus,
                differenceReason,
                vendorDiffVoucher,
                solutionSuggestion,
                vendorConfirm,
                // settlementDiff,
                // invoiceDiff,
                exceptionType,
                exceptionAmount,
                exceptionTime,
                settleVoucher,
                actualInvoiceAmount,
                invoiceTime,
                invoiceNumber,
                invoiceVoucher,
                // ...restFields,
            } = formValues.value
            // const hasException = settlementDiff !== 0 || invoiceDiff !== 0
            const vendorDiffVouchers = vendorDiffVoucher.map(vItem => vItem.url)
            const settleVouchers = settleVoucher.map(vItem => vItem.url)
            const invoiceVouchers = invoiceVoucher.map(vItem => vItem.url)

            try {
                switch (formType) {
                    case 'launch':
                        statusMutate({
                            id,
                            reconciliationStatus,
                            differenceReason,
                            solutionSuggestion,
                        }, {
                            onSuccess: () => {
                                onSuccess('已发起')
                            },
                        })
                        break
                    case 'vendorConfirm':
                        statusMutate({
                            id,
                            reconciliationStatus,
                            vendorConfirm,
                            vendorConfirmUrl: vendorDiffVouchers.join(','),
                        }, {
                            onSuccess: () => {
                                onSuccess('已确认')
                            },
                        })
                        break
                    case 'exception':
                        statusMutate({
                            id,
                            reconciliationStatus,
                            exceptionType,
                            exceptionAmount,
                            exceptionTime: `${exceptionTime} 00:00:00`,
                            exceptionSettlementUrl: settleVouchers.join(','),
                            // exceptionSettlementUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.p9N4LqKEfaJ2AewVtiYTiAAAAA?rs=1&pid=ImgDetMain',
                        }, {
                            onSuccess: () => {
                                onSuccess('异常处理成功')
                            },
                        })
                        break
                    case 'invoice':
                        statusMutate({
                            id,
                            reconciliationStatus,
                            actualInvoiceAmount,
                            invoiceTime: `${invoiceTime} 00:00:00`,
                            invoiceNumber,
                            invoiceUrl: invoiceVouchers.join(','),
                        }, {
                            onSuccess: () => {
                                onSuccess('发票上传成功')
                            },
                        })
                        break
                }

                // setTimeout(() => {
                //     router.back()
                // }, 2000)
            }
            catch (error) {
                console.error(error)
            }
            // finally {
            //     isFormLoading.value = false
            // }
        }
    })
}
</script>

<template>
    <el-skeleton v-if="isFormLoading"
                 :rows="8"
    />

    <div v-else
         class="form-panel"
    >
        <el-button class="mb-20"
                   @click="$router.back"
        >
            返回列表
        </el-button>

        <div class="form-content">
            <h2 class="module-title pl-24">
                基本信息
            </h2>

            <el-form ref="formRef"
                     :model="formValues"
                     :rules="rules"
                     require-asterisk-position="right"
                     label-width="auto"
                     class="mb-20"
            >
                <el-row :gutter="20"
                        class="px-24"
                >
                    <el-col :span="8">
                        <el-form-item label="对账单号："
                                      class="form-item-display"
                        >
                            {{ formValues.reconciliationCode }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="对账单名称："
                                      class="form-item-display"
                        >
                            {{ formValues.reconciliationName }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="对账期间："
                                      class="form-item-display"
                        >
                            {{ formatTime(formValues.reconciliationDate as string, 'yyyy-MM') }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="起止日期："
                                      class="form-item-display"
                        >
                            {{ formatTime(formValues.reconciliationStartDate as string, 'yyyy-MM-dd') }} ~ {{ formatTime(formValues.reconciliationEndDate as string, 'yyyy-MM-dd') }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="运营商名称："
                                      class="form-item-display"
                        >
                            {{ formValues.operatorName }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="合作商名称："
                                      class="form-item-display"
                        >
                            {{ formValues.vendorName }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="module-divider" />

                <div class="px-24 flex">
                    <h2 class="module-title">
                        结算列表
                    </h2>

                    <el-button type="primary"
                               class="ml-auto"
                               :loading="isPending"
                               @click="handleExport"
                    >
                        导出明细
                    </el-button>
                </div>

                <div class="px-24">
                    <vxe-grid v-bind="detailsGridOptions">
                        <template #status="{ row }">
                            <span class="status-tag"
                                  :class="stateMap[row.settlementStatus]"
                            >
                                {{ getDictLabel('oSettleStatus', row.settlementStatus) }}
                            </span>
                        </template>

                        <template #pager>
                            <vxe-pager :current-page="tablePage.currentPage"
                                       :page-size="tablePage.pageSize"
                                       :total="tablePage.total"
                                       :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                                       background
                                       @page-change="handlePageChange"
                            />
                        </template>
                    </vxe-grid>
                </div>

                <div class="module-divider" />

                <h2 class="module-title pl-24">
                    对账信息
                </h2>

                <el-row :gutter="20"
                        class="px-24"
                >
                    <el-col :span="8">
                        <el-form-item label="实收总金额"
                                      label-position="top"
                                      class="gapy-8"
                        >
                            <p class="text-money">
                                ¥{{ formValues.totalAmount }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="平台技术服务费"
                                      label-position="top"
                                      class="gapy-8"
                        >
                            <p class="text-money">
                                ¥{{ formValues.platformServiceFee }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="停车费申诉扣减费"
                                      label-position="top"
                                      class="gapy-8"
                        >
                            <p class="text-money">
                                ¥{{ formValues.parkingFee }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label-position="top"
                                      class="gapy-8"
                        >
                            <template #label>
                                <div class="flex items-center">
                                    <span class="mr-4">营业额</span>

                                    <el-tooltip content="营业额 = 实收总金额 + 平台技术服务费 - 停车申诉扣减费"
                                                :offset="8"
                                                placement="top"
                                    >
                                        <vxe-icon name="question-circle"
                                                  class="cursor-pointer"
                                        />
                                    </el-tooltip>
                                </div>
                            </template>

                            <p class="text-money">
                                ¥{{ formValues.revenue }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label-position="top"
                                      class="gapy-8"
                        >
                            <template #label>
                                <div class="flex items-center">
                                    <span class="mr-4">佣金</span>

                                    <el-tooltip content="佣金 = 平台技术服务费 * 适用结算比例"
                                                :offset="8"
                                                placement="top"
                                    >
                                        <vxe-icon name="question-circle"
                                                  class="cursor-pointer"
                                        />
                                    </el-tooltip>
                                </div>
                            </template>

                            <p class="text-money">
                                ¥{{ formValues.commission }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label-position="top"
                                      class="gapy-8"
                        >
                            <template #label>
                                <div class="flex items-center">
                                    <span class="mr-4">应结算金额</span>

                                    <el-tooltip content="应结算金额 = 营业额 - 平台技术服务费 - 佣金"
                                                :offset="8"
                                                placement="top"
                                    >
                                        <vxe-icon name="question-circle"
                                                  class="cursor-pointer"
                                        />
                                    </el-tooltip>
                                </div>
                            </template>

                            <p class="text-money">
                                ¥{{ formValues.dueSettlementAmount }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="实际结算金额"
                                      label-position="top"
                                      class="gapy-8"
                        >
                            <p class="text-money">
                                ¥{{ formValues.actualSettlementAmount }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="应开票金额"
                                      label-position="top"
                                      class="gapy-8"
                        >
                            <p class="text-money">
                                ¥{{ formValues.dueInvoiceAmount }}
                            </p>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20"
                        class="px-24"
                >
                    <el-col :span="8">
                        <el-form-item label-position="top"
                                      class="gapy-8"
                        >
                            <template #label>
                                <div class="flex items-center">
                                    <span class="mr-4">差异值_结算</span>

                                    <el-tooltip content="差异值_结算 = 应结算金额 - 实际结算金额"
                                                :offset="8"
                                                placement="top"
                                    >
                                        <vxe-icon name="question-circle"
                                                  class="cursor-pointer"
                                        />
                                    </el-tooltip>
                                </div>
                            </template>

                            <p v-if="formValues.settlementDiff < 0"
                               class="text-money red"
                            >
                                ¥{{ formValues.settlementDiff }}
                            </p>

                            <p v-else-if="formValues.settlementDiff > 0"
                               class="text-money green"
                            >
                                ¥{{ formValues.settlementDiff }}
                            </p>

                            <p v-else
                               class="text-money"
                            >
                                ¥{{ formValues.settlementDiff }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label-position="top"
                                      class="gapy-8"
                        >
                            <template #label>
                                <div class="flex items-center">
                                    <span class="mr-4">差异值_开票</span>

                                    <el-tooltip content="差异值_开票 = 应结算金额 - 实际开票金额"
                                                :offset="8"
                                                placement="top"
                                    >
                                        <vxe-icon name="question-circle"
                                                  class="cursor-pointer"
                                        />
                                    </el-tooltip>
                                </div>
                            </template>

                            <p v-if="formValues.invoiceDiff < 0"
                               class="text-money red"
                            >
                                ¥{{ formValues.invoiceDiff }}
                            </p>

                            <p v-else-if="formValues.invoiceDiff > 0"
                               class="text-money green"
                            >
                                ¥{{ formValues.invoiceDiff }}
                            </p>

                            <p v-else
                               class="text-money"
                            >
                                ¥{{ formValues.invoiceDiff }}
                            </p>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formType === 'launch'"
                        :gutter="20"
                        class="px-24"
                >
                    <el-col :span="24">
                        <el-form-item label="差异原因说明"
                                      label-position="top"
                        >
                            <el-input v-model="formValues.differenceReason"
                                      type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 4 }"
                                      placeholder="请输入"
                                      maxlength="200"
                                      show-word-limit
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="处理建议"
                                      label-position="top"
                        >
                            <el-input v-model="formValues.solutionSuggestion"
                                      type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 4 }"
                                      placeholder="请输入"
                                      maxlength="200"
                                      show-word-limit
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formType !== 'launch'"
                        :gutter="20"
                        class="px-24"
                >
                    <el-col :span="8">
                        <el-form-item label="差异原因说明"
                                      label-position="top"
                        >
                            <p>
                                {{ formValues.differenceReason }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="处理建议"
                                      label-position="top"
                        >
                            <p>
                                {{ formValues.solutionSuggestion }}
                            </p>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formType === 'vendorConfirm'"
                        :gutter="20"
                        class="px-24"
                >
                    <el-col :span="24">
                        <el-form-item label="合作商差异情况"
                                      label-position="top"
                        >
                            <el-input v-model="formValues.vendorConfirm"
                                      type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 4 }"
                                      placeholder="请输入"
                                      maxlength="200"
                                      show-word-limit
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="合作商异议凭证"
                                      label-position="top"
                        >
                            <FlUpload v-model="formValues.vendorDiffVoucher"
                                      accept=".png,.jpg,.jpeg"
                                      :file-size="50"
                                      :limit="10"
                            />

                            <p class="tips-upload">
                                请上传 大小不超过 50MB，格式为 png/jpg/jpeg 的图片
                            </p>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formType !== 'vendorConfirm'"
                        :gutter="20"
                        class="px-24"
                >
                    <el-col :span="8">
                        <el-form-item label="合作商差异情况"
                                      label-position="top"
                        >
                            <p>
                                {{ formValues.vendorConfirm }}
                            </p>
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="合作商异议凭证"
                                      label-position="top"
                        >
                            <FlUpload v-model="formValues.vendorDiffVoucher"
                                      accept=".png,.jpg,.jpeg"
                                      :file-size="50"
                                      :limit="10"
                                      disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <template v-if="formType === 'exception'">
                    <div class="module-divider" />

                    <h2 class="module-title pl-24">
                        结算异常处理信息
                    </h2>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="8">
                            <el-form-item label="结算异常处理类型"
                                          label-position="top"
                                          prop="exceptionType"
                            >
                                <el-select v-model="formValues.exceptionType"
                                           placeholder="请选择"
                                >
                                    <el-option v-for="item in exceptionTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="结算金额(元)"
                                          label-position="top"
                                          prop="exceptionAmount"
                            >
                                <el-input-number v-model="formValues.exceptionAmount"
                                                 class="input-num"
                                                 :controls="false"
                                                 :min="0"
                                                 :precision="2"
                                                 placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="结算时间"
                                          label-position="top"
                                          prop="exceptionTime"
                            >
                                <el-date-picker v-model="formValues.exceptionTime"
                                                type="date"
                                                placeholder="请选择"
                                                value-format="YYYY-MM-DD"
                                                style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="24">
                            <el-form-item label="结算凭证"
                                          label-position="top"
                                          prop="settleVoucher"
                            >
                                <FlUpload v-model="formValues.settleVoucher"
                                          accept=".png,.jpg,.jpeg"
                                          :file-size="50"
                                          :limit="10"
                                />

                                <p class="tips-upload">
                                    请上传 大小不超过 50MB，格式为 png/jpg/jpeg 的图片
                                </p>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>

                <template v-if="formType !== 'exception' && formValues.exceptionType !== null">
                    <div class="module-divider" />

                    <h2 class="module-title pl-24">
                        结算异常处理信息
                    </h2>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="8">
                            <el-form-item label="结算异常处理类型：">
                                {{ getDictLabel('oExceptionType', formValues.exceptionType) }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="结算金额：">
                                ¥ {{ formValues.exceptionAmount }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="结算时间：">
                                {{
                                    formValues.exceptionTime
                                        ? formatTime(formValues.exceptionTime, 'yyyy-MM-dd')
                                        : ''
                                }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="24">
                            <el-form-item label="结算凭证：">
                                <FlUpload v-model="formValues.settleVoucher"
                                          accept=".png,.jpg,.jpeg"
                                          :file-size="50"
                                          :limit="10"
                                          disabled
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>

                <template v-if="formType === 'invoice'">
                    <div class="module-divider" />

                    <h2 class="module-title pl-24">
                        开票信息
                    </h2>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="8">
                            <el-form-item label="实际开票金额(元)"
                                          label-position="top"
                                          prop="actualInvoiceAmount"
                            >
                                <el-input-number v-model="formValues.actualInvoiceAmount"
                                                 class="input-num"
                                                 :controls="false"
                                                 :min="0"
                                                 :precision="2"
                                                 placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="开票时间"
                                          label-position="top"
                                          prop="invoiceTime"
                            >
                                <el-date-picker v-model="formValues.invoiceTime"
                                                type="date"
                                                placeholder="请选择"
                                                value-format="YYYY-MM-DD"
                                                style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="发票号码"
                                          label-position="top"
                            >
                                <el-input v-model="formValues.invoiceNumber"
                                          placeholder="请输入"
                                          maxlength="8"
                                          @input="(val) => formValues.invoiceNumber = val.replace(/\D/g, '')"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="24">
                            <el-form-item label="发票凭证"
                                          label-position="top"
                                          prop="invoiceVoucher"
                            >
                                <FlUpload v-model="formValues.invoiceVoucher"
                                          accept=".png,.jpg,.jpeg"
                                          :file-size="50"
                                          :limit="10"
                                />

                                <p class="tips-upload">
                                    请上传 大小不超过 50MB，格式为 png/jpg/jpeg 的图片
                                </p>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>

                <template v-if="formType === 'detail' && formValues.reconciliationStatus === 5">
                    <div class="module-divider" />

                    <h2 class="module-title pl-24">
                        开票信息
                    </h2>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="8">
                            <el-form-item label="实际开票金额：">
                                ¥ {{ formValues.actualInvoiceAmount }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="开票时间：">
                                {{
                                    formValues.invoiceTime
                                        ? formatTime(formValues.invoiceTime, 'yyyy-MM-dd')
                                        : ''
                                }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label=" 发票号码：">
                                {{ formValues.invoiceNumber }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20"
                            class="px-24"
                    >
                        <el-col :span="24">
                            <el-form-item label="发票凭证：">
                                <FlUpload v-model="formValues.invoiceVoucher"
                                          accept=".png,.jpg,.jpeg"
                                          :file-size="50"
                                          :limit="10"
                                          disabled
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
            </el-form>
        </div>

        <div v-if="formType === 'detail'"
             class="form-footer"
        >
            <el-button @click="$router.go(-1)">
                返回
            </el-button>
        </div>

        <div v-else
             class="form-footer"
        >
            <el-button @click="$router.go(-1)">
                取消
            </el-button>

            <el-button type="primary"
                       @click="handleSubmit(formRef)"
            >
                提交
            </el-button>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../custom.less';

.input-num {
    width: 100%;

    :deep(.el-input__inner) {
        text-align: left;
    }
}
</style>
